<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div @click="getInfo">当然这只是一个没用的页面</div>
    <button
      v-for="(item, index) in arr"
      :key="item.a"
      @click="changeHappy"
      @mouseenter="onMouseenter"
      @dragstart="dropStart($event, item, index)"
      @drop="dropEnd($event, item, index)"
      @dragover="(e) => e.preventDefault()"
      :disabled="['eee', 'fff'].includes(item.a)"
    >
      {{ item.a }}
    </button>
    <!-- <button @click="changeHappy">getSome</button>
    <button @click="changeHappy">getSome</button> -->
  </div>
  <slot name="aaa" :data="aaa"></slot>
  <slot name="bbb" :data="bbb"></slot>
</template>

<script setup lang="ts">
import { defineEmits, ref,inject } from "vue";

const injaaa = inject('aaa')
console.log('injaaa: ', injaaa);
const emits = defineEmits(["changeBetter"]);
const changeHappy = () => {
  console.log(1111, emits);
  emits("changeBetter", "I Am Iornman");
};
const onMouseenter = (event: any) => {
  // console.log("eventtarget: ", event.target);
  event.target.draggable = true;
};
const targetIndex = ref<number>();
const arr1 = ref<any>([]);
const arr2 = ref<any>([]);
const dropStart = (event: any, record: any, index: number) => {
  targetIndex.value = index;
  arr1.value = arr.value.filter((item) => {
    return record.id === item.id;
  });
  arr2.value = arr.value.filter((item) => {
    return record.id !== item.id;
  });
};
const dropEnd = (event: any, record: any, index: number) => {
  // console.log("event: ", event);
  // console.log("index: ", index);
  let startindex: any = "";
  let endindex: any = "";
  arr.value.forEach((item, index2) => {
    if (item.a === "eee" && !startindex) startindex = index2;
    if (item.a === "fff" && !endindex) endindex = index2;
  });
  console.log("endindex: ", endindex);
  console.log("targetIndex.value: ", targetIndex.value);
  if (index <= startindex) {
    index = 1;
  }
  if (index >= endindex - 1) {
    index = endindex - 1;
  }
  if (targetIndex.value === index) {
    return;
  }
  arr2.value.splice(index, 0, ...arr1.value);
  arr.value = arr2.value;
};

const arr = ref([
  { a: "eee", id: 0 },
  { a: "aaa", id: 1 },
  { a: "bbb", id: 2 },
  { a: "ccc", id: 3 },
  { a: "fff", id: 4 },
]);
const getInfo = () => {
  console.log("这可真是挺尬的");
};

const aaa: any = ref({
  message: "传到aaa中的数据",
});
const bbb: any = ref({
  message: "传到bbb中的数据",
});

const obj22 = {
  nameChi: {
    name: "aaa",
    nameChi: {
      name: "bbb",
      nameChi: { name: "ccc", nameChi: { name: "ddd" } },
    },
  },
  name: "000",
};

const digui = (obj: any) => {
  if (obj.nameChi) {
    obj.name = obj.name + " / " + digui(obj.nameChi);
  }
  return obj.name;
};
console.log(digui(obj22));

/*
  10 = 9 + 8
  9 = 8 + 7
  8 = 7 + 6
  7 = 6 + 5
  6 = 5 + 4
  5 = 4 + 3
  4 = 3 + 2
  3 = 2 + 1
  2 = 2
  1 = 1
*/
const fibona = (n: number) => {
  if (n === 1) return 1;
  if (n === 2) return 2;
  return fibona(n - 1) + fibona(n - 2);
};
console.log(fibona(10)); // 89级复制代码

// 经典的阶乘函数
const factorial = (n: number) => {
  if (n <= 1) return 1;
  return factorial(n - 1) * n;
};
console.log(factorial(5)); // 120
// console.log(factorial(11170)); // 11170爆栈复制代码

function entries() {
  // 参数为对象
  const obj = { name: "xiaoming", age: "seven", sex: "man", grade: "four" };
  const res = Object.entries(obj);
  console.log(res);

  // 参数为数组
  const obj1 = [1, 2, 3, 4, 5, 6];
  const res1 = Object.entries(obj1);
  console.log(res1);

  // 参数为数组（数组中包含对象）
  const obj2 = [1, 2, 3, 4, 5, 6, { a: "a" }, { b: "b" }, { c: "c" }];
  const res2 = Object.entries(obj2);
  console.log(res2);

  // 参数为数组（数组中元素为对象）
  const obj3 = [{ a: "a" }, { b: "b" }, { c: "c" }];
  const res3 = Object.entries(obj3);
  console.log(res3);
}

entries();
</script>

<style lang="less"></style>
